<template>
	<view>
		<div class='app'>
			<div class='toptext'>订单详情</div>
			<div class='content'>
				<div class='left'>
					<span>收货人</span>
					<span>配送费</span>
					<span>下单时间</span>
					<span>起始地点</span>
					<span>送达地点</span>
					<span v-if="type==0">导航跳转</span>
				</div>
				<div class='right'>
					<span>{{table[0].userName}} ({{table[0].userPhone}})
						<image will-change: transform style="margin-left: 10px; width: 33rpx;height: 33rpx;"
							src="../../static/image/tabbar_icon/message.png">
						</image>
					</span>
					<span>￥{{table[0].deliveryFee}}</span>
					<span>{{table[0].orderTime}}</span>
					<span>{{comAddress}}</span>
					<span>{{table[0].userMapAddress}}</span>
					<span v-if="type==0">
						<view @click="map">
							<image will-change: transform style="margin-left: 20px; width: 53rpx;height: 43rpx;"
								src="../../static/image/tabbar_icon/map.png"></image>
						</view>
					</span>
					<button  v-if="type==0" style="width: 100px;" @click="complete(orderId)">已完成</button>
					<!-- 							<map  class="map"
						   			:latitude="18.17386"
						   			:longitude="24.484305"
						   			scale="14"		
						   			:markers="markers"
						   			:show-location="true"
						   			@markertap="markertap"
						   			@updated='mapUpdated'
						   			>
						   			</map> -->

				</div>
			</div>
		</div>
	</view>
</template>
<script>
	// import amap from "../../js_sdk/js_amap/amap-wx.130.js";
	//          var amapPluginInstance = new amap.AMapWX({	
	// 				key: "0a1e26c6705378ca402b54fd90249684"  //该key 是在高德中申请的微信小程序key
	// 			});
	// 		   amapPluginInstance.getPoiAround({
	// 		      success: function(data){
	// 		        //成功回调
	// 		      },
	// 		      fail: function(info){
	// 		        //失败回调
	// 		        console.log(info)
	// 		      }
	// 		    })
	import {baseUrl} from "../../libs/request.js"
	export default {
		data() {
			return {
				type: '',
				table: [],
				comAddress: '',
				orderId:'',
			}
		},
		onLoad(option) {
			this.table = ""
			this.type = option.data
			if (option.data == 0) {
				this.table = uni.getStorageSync("userOrderTable")
				this.comAddress = this.table[0].comAddress + "分店"
			} else {
				this.table = uni.getStorageSync("userOrderTableComplete")
				this.comAddress = this.table[0].comAddress + "分店"
			}
			this.orderId = uni.getStorageSync("orderId")	
		},
		methods: {
			complete(orderId){
				uni.request({
					url: baseUrl + "/riderOrder/completeOrder",
					method: 'POST',
					data: {
						orderId: this.orderId,
					},
					header: {
						"Content-Type": "application/x-www-form-urlencoded"
					},
					success: (res) => {
						console.log(res.data)
						if(res.data==1){							
							var pages = getCurrentPages();// 获取所有的页面栈
							var prevPage = pages[pages.length - 2]; 
							prevPage.$vm.lookRiderOrder()//在上一个页面中就可以用addressObj进行接收
							    uni.navigateBack();
							// uni.switchTab({
							// 	url:'../index/index'
							// })																									
						}
					}
				})			
			},
			map() {
				//传参
				let latitude = Number(this.table[0].userAddressLat);
				let longitude = Number(this.table[0].userAddressLng);
				let address = this.table[0].address
				// 获取定位信息
				uni.getLocation({
					type: 'wgs84', //返回可以用于uni.openLocation的经纬度
					// 用户允许获取定位
					success: function(res) {
						console.log(res, '经纬度===>')
						if (res.errMsg == "getLocation:ok") {
							console.log(latitude)
							console.log(longitude)
							uni.openLocation({
								// 传入你要去的纬度
								latitude: latitude,
								// 传入你要去的经度
								longitude: longitude,
								// 传入你要去的地址信息 不填则为空
								address: address,
								// 缩放大小
								scale: 18,
								success: function() {
									console.log('成功的回调success');
								}
							});
						}
					},
					// 用户拒绝获取定位后 再次点击触发
					fail: function(res) {
						console.log(res)
						if (res.errMsg == "getLocation:fail auth deny") {
							uni.showModal({
								content: '检测到您没打开获取信息功能权限，是否去设置打开？',
								confirmText: "确认",
								cancelText: '取消',
								success: (res) => {
									if (res.confirm) {
										uni.openSetting({
											success: (res) => {
												console.log('确定');
											}
										})
									} else {
										console.log('取消');
										return false;
									}
								}
							})
						}
					}
				});
			},
		},
	}
</script>
<style lang="scss">
	* {
		margin: 0;
		padding: 0;
	}

	.app {
		background-color: #f2f6f9;
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 100vh;

		.toptext {
			margin-top: 30rpx;
			font-size: 18px;
			background-color: #fff;
			border-radius: 10px;
			width: 90%;
			padding: 20rpx 10rpx;
			text-align: center;
			color: #575757;
		}

		.content {
			box-sizing: border-box;
			border-radius: 20px;
			margin-top: 30rpx;
			font-size: 14px;
			background-color: #fff;
			width: 90%;
			padding: 30px 5px;
			display: flex;

			.left {
				width: 200rpx;
				display: flex;
				flex-direction: column;
				color: #95a5ac;

				span {
					margin-bottom: 15rpx;
					height: 40px;
				}
			}

			.right {
				margin-left: 50rpx;
				display: flex;
				flex-direction: column;
				color: #575757;

				span {
					margin-bottom: 15rpx;
					height: 40px;
				}

				.onlydiv {
					margin-bottom: 15rpx;
					height: 40px;

					.tag {
						margin-right: 10rpx;
					}
				}
			}
		}
	}
</style>
